 <template>
  <div>
    <div class="card-style">
      <div ref="main1" :style="{width: width,height: height}"></div>
    </div>
  </div>
</template>

<script>
import echarts from "src/plugins/echarts.common.min.js";
import { getSumMoney, getUser, getAccountCourse } from "src/service/count";
import { debounce } from "src/util";

export default {
  data() {
    return {
      chart: null,
      xAxis: [],
      seriesArr: [],
      title: "收入统计"
    };
  },
  components: {},
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    }
  },
  mounted() {
    getSumMoney().then(res => {
      let xAxis = res.time,
        seriesArr = res.size;
      var data = [
        {
          name: "收入",
          type: "line",
          barWidth: "25%",
          data: seriesArr,
          barGap: "10%"
        }
      ];

      this.initEchart(this.title, xAxis, data);
    });

    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initEchart: function(title, xAxis, seriesArr) {
      this.chart = echarts.init(this.$refs.main1);
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: title
        },
        tooltip: {},
        calculable: true,
        xAxis: {
          type: "category",
          data: xAxis
        },
        yAxis: {
          type: "value",
          name: '单位：元'
        },
        series: seriesArr
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.card-style {
  width: 100%;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
